<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" type="text/css" href="template/index.css"/>

</head>
<body onload="get_path()" style="overflow: hidden; margin: 0">

<div id="container" style="margin: 5vh 5vw">
    <div id="message-box" style="font-weight: bold; font-size: 2vh">This is a message box!</div>
    <div id="top"
         class="center"
         style="background-color: #a6ffdf; height: 15vh;">
        <h1 style="font-weight: bold; font-size: 5vh">Excel文件合并程序</h1>
    </div>
    <div id="main"
         class="around "
         style="background-color: #c2fde3; height: 50vh;">
        <div id="drop_area1_out">
            <div id="drop_area1"
                 class="column drop_area">
                <div id="title1" style="height: 10vh; font-weight: bold; font-size: 4vh;" class="center">
                    进项文件
                </div>
                <label for="file_btn1">
                    <input type="file" class="none" name="file" id="file_btn1" accept=".xls,.xlsx,.csv">
                </label>

                <div id="drop_area1_in_hidden" class="center"
                     style="font-size: 1vh;height: 5vh; font-weight: bold; visibility: hidden">
                </div>
                <div style="height: 30vh; display: flex; justify-content: center">
                    <img id="add_img1" alt="添加文件" src="template/add_file.png" class="img_size"/>
                </div>
            </div>
        </div>
        <div id="drop_area2_out">
            <div id="drop_area2"
                 class="column drop_area">
                <div id="title2" style="height: 10vh; font-weight: bold; font-size: 4vh;" class="center">
                    销项文件
                </div>
                <label for="file_btn2">
                    <input type="file" class="none" name="file" id="file_btn2" accept=".xls,.xlsx,.csv">
                </label>
                <div id="drop_area2_in_hidden" class="center"
                     style="font-size: 1vh; height: 5vh;font-weight: bold; visibility: hidden">
                </div>
                <div style="height: 30vh; display: flex; justify-content: center">
                    <img id="add_img2" alt="添加文件" src="template/add_file.png" class="img_size"/>
                </div>
            </div>
        </div>
        <div id="drop_area3_out">
            <div id="drop_area3"
                 class="column drop_area">
                <div id="title3" style="height: 10vh; font-weight: bold; font-size: 4vh;"
                     class="center">
                    使用说明
                </div>
                <div style="height: 30vh; font-size: 2vh; font-weight: bold; margin: 3vh 3vw">
                    1. 修改左下角的2个默认的文件路径配置<br/>
                    2. 修改完后点击配置按钮<br/>
                    3. 点击加号或者直接将文件拖入<br/>
                    4. 点击合并按钮
                </div>
            </div>
        </div>


    </div>
    <div id="bottom" style="background-color: #a6ffdf; height: 25vh; display: flex;" class="row">
        <div id="config" style="background-color: #a6ffdf;" class="bottom_div_size">
            <div id="path"
                 class="around column"
                 style="background-color: #c2fde3">
                <div class="center"
                     style="background-color: #c2fde3; flex-direction: column; height: 10vh; width: 40vw">
                    <div class="center" style="font-size: 3vh;background-color: #c2fde3; height: 5vh; width: 30vw">
                        请输入输出结果文件夹路径:
                    </div>
                    <input id="out_path"
                           style="font-size: 3vh;background-color: #a6ffdf;height: 4vh; width: 30vw; border: 0; padding: 0"
                           type="text"
                           value=""/>
                </div>
                <div class="center"
                     style="background-color: #c2fde3; flex-direction: column; height: 10vh; width: 40vw">
                    <div class="center" style="font-size: 3vh;background-color: #c2fde3; height: 5vh; width: 30vw">
                        请输入合并文件路径:
                    </div>
                    <input id="union_excel"
                           style="font-size: 3vh;background-color: #a6ffdf;height: 4vh; width: 30vw; border: 0; padding: 0"
                           type="text"
                           value=""/>
                </div>
            </div>

        </div>

        <div id="btn" style="background-color: #a6ffdf; " class="bottom_div_size">
            <div id="btns"
                 class="around row"
                 style="background-color: #c2fde3;">
                <div id="setting"
                     style=" background-color: #f5b59c;" class="center btn_style" onclick="save_path()">
                    <div style="font-weight: bold; font-size: 2vh">配置</div>
                </div>
                <div id="combine_btn" style=" background-color: #f5b59c; " class="center btn_style">
                    <div style="font-weight: bold; font-size: 2vh">合并</div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="template/init.js"></script>

    <script type="text/javascript" src="template/upload.js"></script>
    <script type="text/javascript" src="template/ModifyCss.js"></script>
    <script type="text/javascript" src="template/JsToPy.js"></script>
    <script type="text/javascript" src="template/DragFile.js"></script>
    <script type="text/javascript" src="template/ClickBtn.js"></script>
</div>
</body>
</html>